﻿﻿
<!DOCTYPE html>
<html>
<head>
<title>the5fire-backbone-router</title>
</head>
<body>

	<div id="search_container"></div>
	<script type="text/template" id="search_template">  
        <label><%= search_label %></label>  
        <input type="text" id="search_input" />  
        <input type="button" id="search_button" value="Search" />  
    </script>
</body>
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<script src="http://www.css88.com/doc/underscore/underscore-min.js"></script>
<script src="http://www.css88.com/doc/underscore/backbone-min.js"></script>
<script>
	(function($) {
		SearchView = Backbone.View.extend({
			initialize : function() {
				//this.render();
			},

			render : function() {
				//使用underscore这个库，来编译模板  
				var template = _.template($("#search_template").html())({
					search_label : "the5fire search"
				});
				//加载模板到对应的el属性中  
				var e = this.el;

				$(e).html(template);
			},

			events : { //就是在这里绑定的  
				'click input[type=button]' : 'doSearch' //定义类型为button的input标签的点击事件，触发函数doSearch  
			},

			doSearch : function(event) {
				alert("search for " + $("#search_input").val());
			}
		});

		var searchView = new SearchView({
			el : $("#search_container")
		});
		searchView.render();
	})(jQuery);
</script>

</html>
